import { IEventEmitter, IWidgetExtendedProps } from "@learnware/core";
import { createApp, App } from "vue";
import { createPinia } from "pinia";
import VueKonva from 'vue-konva';
// import Antd from "ant-design-vue";
import WidgetBase from "WidgetBase";
import RootComponent from "./components/App.vue";
import { createStore } from "./store/app";

interface IWidgetProps extends IWidgetExtendedProps {
  width: number;
  height: number;
  mode: string;
  // preset: IPreset;
}

export default class Widget extends WidgetBase {
  vueApp: App<Element>;

  store: ReturnType<ReturnType<typeof createStore>>;

  __supportInteract: boolean = true;

  constructor(
    $el: JQuery<HTMLElement>,
    data: IWidgetProps,
    pageNumber: number,
    eventManager: IEventEmitter,
    pageId: string,
  ) {
    super($el, data, pageNumber, eventManager, pageId);
    const pinia = createPinia();
    this.vueApp = createApp(RootComponent, {});
    // this.vueApp.use(Antd);

    this.vueApp.use(pinia);
    this.addClass('resources/css/main.css');
    const store = createStore(this.pageNumber, this.itemId)();
  
    store.setWidth(data.width);
    store.setHeight(data.height);
    store.setItemRadius(data.itemRadius);
    store.setColums(data.columns);
    store.setColor(data.color);
    store.setLightColor(data.lightColor);
    store.setLineColor(data.lineColor);
    store.setRows(data.rows);
    store.setXGap(data.XGap);
    store.setYGap(data.YGap); 
    this.store = store;
    this.vueApp.provide('store', store);
    this.vueApp.provide('this',this)
    this.vueApp.use(VueKonva);
    this.vueApp.mount($el[0]);
    // @ts-ignore
    window.MyWidget = this;
    console.log(this);
       
  }
  // getState(): { [key: string]: any; } {
  //   return {
  //     width:this.store.width,
  //     height:this.store.height,
  //   };
  // }
  setBack(){
    // console.log("点",this.store.points);
    // console.log("线段",this.store.segment);
    // console.log("文字",this.store.textDatas);
    console.log("操作过程",this.store.setBack());
  
  }
  reset(){
    this.store.reset()
  }
  refreshUI(options) {
    console.log(options);
    if (options.itemRadius) {
      this.store.setItemRadius(options.itemRadius);
    }
    if (options.color) {
      this.store.setColor(options.color);
    }
    if (options.lineColor) {
      this.store.setLineColor(options.lineColor);
    }
    if (options.lightColor) {
      this.store.setLightColor(options.lightColor);
    }
    if (options.columns) {
      this.store.setColums(options.columns);
    }
    if (options.rows) {
      this.store.setRows(options.rows);
    }
    if (options.XGap) {
      this.store.setXGap(options.XGap);
    }
    if (options.YGap) {
      this.store.setYGap(options.YGap);
    }
  }
}